import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../generated/l10n.dart';
import '../utils/CommUtils.dart';
import 'Travel1.dart';
import 'Travel2.dart';

//旅行
class Travel extends StatefulWidget {
  Travel({Key? key}) : super(key: key);

  @override
  State<Travel> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<Travel> with SingleTickerProviderStateMixin {
  //更多热门游戏
  List<String> tabList = [S.current.map_, S.current.reward_];

  TabController? _tabController; //需要定义一个Controller
  @override
  void initState() {
    _tabController =
        TabController(length: tabList.length, vsync: this, initialIndex: 0);

    ///监听TabController的动画，实时刷新，这样选中背景就能跟随移动了
    _tabController?.animation?.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      SizedBox(
        height: ScreenUtil().setHeight(10),
      ),
      _tabBar(),
      SizedBox(
        height: ScreenUtil().setHeight(7.5),
      ),
      Expanded(
          child: TabBarView(controller: _tabController, children: <Widget>[
        Travel1(),
        Travel2(),
      ])),
      SizedBox(
        height: ScreenUtil().setHeight(10),
      ),
    ]);
  }

  //tab切换 可以滑动的图片
  Widget _tabBar() {
    Size size = MediaQuery.of(context).size;
    double width = size.width;
    // double imgwidth = width - ScreenUtil().setWidth(40);

    return Padding(
        padding: EdgeInsets.only(left: width * 0.065, right: width * 0.065),
        child: Container(
            height: size.height * 0.04,
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/images/trivel_tab.png'),
                  fit: BoxFit.fill),
            ),
            alignment: Alignment.center,
            child: // Directly use inside yoru [TabBar]
                Stack(
              children: [
                /// 未选中时间背景色
                // Container(
                //   height: 55 - 5.0,
                //   color: Colors.black,
                // ),

                /// 选中时间背景图片
                Positioned(
                  width: width * 0.85 / tabList.length,
                 height: size.height * 0.043,
                  left: _tabController!.animation!.value *
                      width *
                      0.85 /
                      tabList.length,
                  child: Image.asset(
                    "assets/images/tab_img.png",
                    fit: BoxFit.fill,
                  ),
                ),
                TabBar(
                  labelPadding: EdgeInsets.all(0),
                  tabs: tabList
                      .map(
                        (e) => Tab(
                            //tab /text只能有一个，否则会报错
                            child: CommUtils.getStroke(
                                e, 12, Color(0xffA6ADDD), Colors.black12)),
                      )
                      .toList(),
                  controller: _tabController,
                  isScrollable: false,
                  indicatorColor: Colors.transparent,
                )
              ],
            )));

    // 添加顶部导航条
  }
}
